/**
 * Created by xieml on 2019/9/26.
 */

(function(){
    var barrageArray = ["盼望着，盼望着","秋天来了"," 秋天带着落叶的声音来了","早晨像露珠一样新鲜","天空发出柔和的光辉","澄清又缥缈","使人想听见","一阵高飞的","云雀","的","歌","唱"];
    var barrageColorArray =  [
        "#d72a26",
        "#2B4755",
        "#44A1A9",
        "#E57D60",
        "#D72A26",
        "#7DC8AF",
        "#649F84",
        "#D9821C",
        "#C3A098",
        "#6D6F73",
        "#CDC9A5",
        "#CAFF70",
        "#BDB76B",
        "#9A32CD",
        "#8B7D6B",
        "#8B7500",
        "#8B5A2B",
        "#8B4789",
        "#8B4500",
        "#8B0000",
        "#7B68EE",
        "#548B54",
        "#4EEE94",
        "#458B00",
        "#388E8E",
        "#050505",
        "#104E8B",
        "#00688B",
        "#545454",
        "#6E6E6E",
        "#BC8F8F"
    ];

    let CONFIG = {
        data:barrageArray,
        color:barrageColorArray
    }

    var barrageTipWidth = 50; //提示语的长度

    var barrageBoxWrap = document.querySelector('.barrage-container-wrap');;
    var barrageBox = document.querySelector('.barrage-container');
    var inputBox = document.querySelector('.input');
    var sendBtn = document.querySelector('.send-btn');

    //容器的宽高度
    var barrageWidth = ~~window.getComputedStyle(barrageBoxWrap).width.replace('px','');
    var barrageHeight = ~~window.getComputedStyle(barrageBoxWrap).height.replace('px','');


    let Barrage = function (data,color) {
        CONFIG.data  = data  || barrageArray;
        CONFIG.color = color || barrageColorArray;
        barrageData();
    }

    Barrage.prototype = {
        closeBarrage:function () {
            barrageBox.style.display = "none"
        },
        openBarrage:function () {
            barrageBox.style.display = "block";
            barrageData()
        }
    }

    //发送
    function sendMsg(){
        var inputValue = inputBox.value;
        inputValue .replace(/\ +/g, "");

        if (inputValue.length <= 0) {
            alert('请输入');
            return false;
        }

        //生成弹幕
        createBarrage(inputValue,true);
        inputBox.value = '';
    }


    //创建弹幕
    function createBarrage(msg, isSendMsg){
        var divNode = document.createElement('div');
        var spanNode = document.createElement('span');

        divNode.innerHTML = msg;
        divNode.classList.add('barrage-item');
        barrageBox.appendChild(divNode);

        spanNode.innerHTML = '举报';
        spanNode.classList.add('barrage-tip');
        divNode.appendChild(spanNode);

        let barrageOffsetLeft = getRandom(barrageWidth, barrageWidth*2);
        barrageOffsetLeft = isSendMsg ? barrageWidth : barrageOffsetLeft
        let barrageOffsetTop = getRandom(10, barrageHeight-10);
        let barrageColor = barrageColorArray[Math.floor(Math.random()*(barrageColorArray.length))];

        //执行初始化滚动
        initBarrage.call(divNode,{
            left : barrageOffsetLeft,
            top : barrageOffsetTop,
            color : barrageColor
        });

    }

    //初始化弹幕移动(速度，延迟)
    function initBarrage(obj) {
        //初始化
        obj.top = obj.top || 0;
        obj.class = obj.color || '#fff';
        this.style.left = obj.left + 'px';
        this.style.top = obj.top + 'px';
        this.style.color = obj.color;

        //添加属性
        this.distance = 0;
        this.width = ~~window.getComputedStyle(this).width.replace('px','');
        this.offsetLeft = obj.left;
        this.timer = null;

        //弹幕子节点
        var barrageChileNode = this.children[0];
        barrageChileNode.style.left = (this.width-barrageTipWidth)/2 + 'px';

        //运动
        barrageAnimate(this);

        //停止
        this.onmouseenter = function(){
            barrageChileNode.style.display= 'block';
            cancelAnimationFrame(this.timer);
        };

        this.onmouseleave = function(){
            barrageChileNode.style.display = 'none';
            barrageAnimate(this);
        };

        //举报
        barrageChileNode.onclick = function(){
            alert('举报成功');
        }

    }

    //弹幕动画
    function barrageAnimate(obj){
        move(obj);

        if(Math.abs(obj.distance) < obj.width+obj.offsetLeft){
            obj.timer = requestAnimationFrame(function(){
                barrageAnimate(obj);
            });
        }else{
            cancelAnimationFrame(obj.timer);
            if(obj.parentNode.childNodes.length == Math.floor(barrageArray.length * 0.7)){
                barrageData();
            }


            //删除节点
            obj.parentNode.removeChild(obj);

        }
    }

    //移动
    function move(obj){
        obj.distance--;
        obj.style.transform = 'translateX('+obj.distance+'px)';
        obj.style.webkitTransform = 'translateX('+obj.distance+'px)';
    }

    //随机获取高度
    function getRandom(start, end){
        return start +(Math.random() * (end - start));
    }


    /*******初始化事件**********/

  //  barrageData(barrageArray);
    function barrageData(){
        CONFIG.data.forEach(function(item,index){
            createBarrage(item, false);

        });
    }


    //点击发送
    sendBtn.onclick = sendMsg;   //点击发送

    //回车
    inputBox.onkeydown = function(e){
        e = e|| window.event;
        if(e.keyCode == 13){
            send();
        }
    }

    window.Barrage = function (data,color) {
        return new Barrage(data,color)
    }

})()